<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/jsp/business/include/doctype.jsp" %>
<link rel="stylesheet" type="text/css" href="${requestScope.contextPath}/js/jquery-ui-1.8.14.custom/css/ui-lightness/jquery-ui-1.8.14.custom.css" />
<script language="javascript" type="text/javascript">
<!--
$(document).ready(function() {
	$('#sel_business_code').change(function() {
		$('#sel_access_auth_code').html('<option value=\"\">방문장소 선택</option>');
		if($(this).val() != '') {
			$.ajax({
				url: '${requestScope.contextPath}/business/mAccessMan/mAccessManApplyBusiness.do',
				type:'POST',
				data: {
					'business_code': $(this).val()
				},
				dataType:'json',
				success: function(json){
				  if( json ){
						for( i = 0 ; i < json.list.length; i++ ){
							$('#sel_access_auth_code').append('<option value=\"' + json.list[i].CODE + '\">' + json.list[i].NAME + '</option>');
						}
					}
				},
				error: function(){
					alert('error');
				}
			});
		}
	});
});

$(function() {
	var dates = $('#txt_reservation_date').datepicker({
		showOn: "button",
		buttonImage: "${requestScope.contextPath}/images/reservation/cal1.gif",
		buttonImageOnly: true,
		numberOfMonths: 1,
		dateFormat: 'yy-mm-dd',
		showMonthAfterYear:true,
		showButtonPanel: true,
		monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
		dayNamesMin: ['일', '월', '화', '수', '목', '금', '토'],
		onSelect: function(selectedDate) {
			var option = this.id == "startdate" ? "minDate" : "maxDate";
			var instance = $(this).data("datepicker");
			var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
			dates.not(this).datepicker("option", option, date);
		}
	});
});
function goSubmit(){
	if ($.trim($('#txt_visitor_name').val()) == "") {
		alert('방문객 이름을 입력하세요.');
		$('#txt_visitor_name').focus();
		return;
	}
	if ($.trim($('#txt_visitor_comp_name').val()) == "") {
		alert('방문객 회사를 입력하세요.');
		$('#txt_visitor_comp_name').focus();
		return;
	}
	if ($.trim($('#txt_visitor_tel_no').val()) == "") {
		alert('방문객 연락처를 입력하세요.');
		$('#txt_visitor_tel_no').focus();
		return;
	}
	if ($.trim($('#sel_access_auth_code').val()) == "") {
		alert('방문장소를 선택하세요.');
		$('#sel_access_auth_code').focus();
		return;
	}
	if ($('#txt_reservation_date').val() == "") {
		alert('예약일시를 선택하세요.');
		$('#txt_reservation_date').focus();
		return;
	}
	if ($.trim($('#txt_visitor_reason').val()) == "") {
		alert('방문목적을 입력 하하세요.');
		$('#txt_visitor_reason').focus();
		return;
	}
	//동행인수를 기준으로 동행인 정보 처리
	var visitorParam = "";
	if ($.trim($('#visitor_per_cnt').val()) != "") {
		var cnt = $('#visitor_per_cnt').val();
		for(var i=1;i<=cnt;i++) {
			visitorParam += i+"|" + eval("document.form.visitor_name"+i).value +"|" + eval("document.form.visitor_tel_no"+i).value +"♀";
		}
		document.form.CompanionDetail.value=visitorParam;
	}
	if (confirm('예약등록을 하시겠습니까?')) {
		document.form.submit();
	}
	return;
}

//동행인수 처리 함수
function fnvisitor(num){
	
	for(var i=1;i<=10;i++)
	{
		document.getElementById('visitor'+i).style.display = "none";
		eval("document.form.visitor_name"+i).value = "";
		eval("document.form.visitor_tel_no"+i).value = "";
	}

	for(var j=1;j<=num;j++)
	{
		document.getElementById('visitor'+j).style.display = "block";
	}
	
	if(num > 0){
		document.getElementById('visitor_txt').style.display = "block";
	}else{
		document.getElementById('visitor_txt').style.display = "none";
	}
}

function setVisible(popId) { 
	var t=document.getElementById(popId);
	var check = 1;
	if ($.trim($('#txt_visitor_name').val()) == "" || $.trim($('#txt_visitor_name').val()).length < 2) {
        alert('방문객 이름을 2자 이상 입력하세요.');
        $('#txt_visitor_name').focus();
        check = 0;
    }

    if(check == 1) {
    	$('#apply').html('');
    	$.ajax({
			url: '${requestScope.contextPath}/business/mAccessMan/mAccessManApplySearchPop.do',
			type:'POST',
			data: {
				'txt_visitor_name': $.trim($('#txt_visitor_name').val())
			},
			dataType:'json',
			success: function(json){
			  if( json && json.list1.length > 0){
					for( i = 0 ; i < json.list1.length; i++ ){
						$('#apply').append('<li><span style="display:block; width:220px;">' + json.list1[i].name + ', ' + json.list1[i].dept + '<span class="block">' + json.list1[i].phone + '&nbsp;</span><span class="ripply"><a href="javascript:selectPop(\'searchPop\',\''+json.list1[i].name+'\',\''+json.list1[i].dept+'\',\''+json.list1[i].phone+'\');"><img src="${requestScope.contextPath}/images/btn/btn_select.gif" alt="선택" /></a></span></li>');
					}

					for( i = 0 ; i < json.list2.length; i++ ){
						$('#apply').append('<li><span style="display:block; width:220px;">' + json.list2[i].name + ', ' + json.list2[i].dept + '<span class="block">' + json.list2[i].phone + '&nbsp;</span><span class="ripply"><a href="javascript:selectPop(\'searchPop\',\''+json.list2[i].name+'\',\''+json.list2[i].dept+'\',\''+json.list2[i].phone+'\');"><img src="${requestScope.contextPath}/images/btn/btn_select.gif" alt="선택" /></a></span></li>');
					}

					if (t.style.display != "block") {
						t.style.display ="block";
						document.getElementById('content').style.display="none";
					}else{
						t.style.display ="none";
						document.getElementById('content').style.display="block";
					}
				}else{
					alert('검색결과가 없습니다.');
				}
			},
			error: function(){
				alert('error');
			}
		});
    }
}

function selectPop(popId, name, dept, phoneNum) {
	var t=document.getElementById(popId);
	if (t.style.display != "block") {
		t.style.display ="block";
		document.getElementById('content').style.display="none";
	}else{
		t.style.display ="none";
		document.getElementById('content').style.display="block";
	}
	$('#txt_visitor_name').val(name);
	$('#txt_visitor_comp_name').val(dept);
	$('#txt_visitor_tel_no').val(phoneNum);
}
//-->	
</script>
</head>

<body>
	<div id="wrap">
		<div class="header">
			<h1>출입관리</h1>
			<p class="list"><a href="${requestScope.contextPath}/business/mAccessMan/mAccessManApplySearch.do"><img src="${requestScope.contextPath}/images/btn/btn_search3.gif" alt="검색" /></a></p>
		</div><!-- // header -->
		<div class="content" id="content">
			
			<ul class="tab">
				<li><a href="${requestScope.contextPath}/business/mAccessMan/mAccessManApplyWrite.do"><img src="${requestScope.contextPath}/images/access/tab1_over.gif" alt="방문객 등록" /></a></li>
				<li><a href="${requestScope.contextPath}/business/mAccessMan/mAccessManApplyList.do"><img src="${requestScope.contextPath}/images/access/tab2.gif" alt="나의 신청현황" /></a></li>
			</ul>
			<div class="access">
				<div class="table5">
					<form name="form" action="${requestScope.contextPath}/business/mAccessMan/mAccessManApplyWrite.do" method="post" onsubmit="return false;">
					<input type="hidden" name="Mode" value="Save">						
					<input type="hidden" name="CompanionDetail" value="">
					<table summary="" cellspacing="0" style="width:100%">
						<caption>출입관리</caption>
						<colgroup>
							<col style="width:20%" />
							<col style="width:80%" />
						</colgroup>
						<tbody>
							<tr>
								<th scope="row">이름</th>
								<td><input type="text" name="txt_visitor_name" id="txt_visitor_name" />&nbsp;<a href="javascript:setVisible('searchPop');"><img src="${requestScope.contextPath}/images/btn/btn_search2.gif" alt="검색" /></a></td>
							</tr>
							<tr>
								<th scope="row">회사명</th>
								<td><input type="text" name="txt_visitor_comp_name"  id="txt_visitor_comp_name" /></td>
							</tr>
							<tr>
								<th scope="row">연락처</th>
								<td><input type="text" name="txt_visitor_tel_no" id="txt_visitor_tel_no" /></td>
							</tr>
							<tr>
								<th scope="row">방문장소</th>
								<td>
									<p><select title="사업장 선택" name="sel_business_code" id="sel_business_code" style="width:150px;">
									<option value="">사업장 선택</option>
									<c:forEach items="${mapList2}" var="mapInfo" varStatus="status">
									<option value="${mapInfo.BUSINESS_CODE}">${mapInfo.BUSINESS_NAME}</option>
									</c:forEach>
									</select></p>
									<p><select title="방문장소 선택" name="sel_access_auth_code" id="sel_access_auth_code" style="width:150px;">
										<option value="">방문장소 선택</option>
									</select></p>
								</td>
							</tr>
							<tr>
								<th scope="row">예약일시</th>
								<td>
									<p><input type="text" name="txt_reservation_date" id="txt_reservation_date" class="" readonly="readonly" /></p>
									<p><select name="txt_reservation_start_hour" style="width:30%;">
											<c:forEach var = "i" begin = "1" end = "24" step = "1" varStatus = "status">										   
											<option value="<c:if test="${i <= 9}">0</c:if>${i}" <c:if test="${i eq viewMap.REALINOPEN_HOUR or i eq nHour}">selected</c:if>><c:if test="${i <= 9}">0</c:if>${i}</option>										
											</c:forEach>
										</select>시
										<select name="txt_reservation_start_minute" style="width:30%;">
											<c:forEach var = "i" begin = "00" end = "50" step = "10" varStatus = "status">
											<option value="<c:if test="${i < 10}">0</c:if>${i}" <c:if test="${i eq viewMap.REALINOPEN_MINUTE}">selected</c:if>><c:if test="${i < 10}">0</c:if>${i}</option>
											</c:forEach>
										</select> 분 부터</p>
										
										<p><select name="txt_reservation_end_hour" style="width:30%;">
											<c:forEach var = "i" begin = "1" end = "24" step = "1" varStatus = "status">										   
											<option value="<c:if test="${i <= 9}">0</c:if>${i}" <c:if test="${i eq viewMap.REALINOPEN_HOUR or i eq nHour}">selected</c:if>><c:if test="${i <= 9}">0</c:if>${i}</option>										
											</c:forEach>
										</select>시
										<select name="txt_reservation_end_minute" style="width:30%;">
											<c:forEach var = "i" begin = "00" end = "50" step = "10" varStatus = "status">
											<option value="<c:if test="${i < 10}">0</c:if>${i}" <c:if test="${i eq viewMap.REALINOPEN_MINUTE or i eq '50'}">selected</c:if>><c:if test="${i < 10}">0</c:if>${i}</option>
											</c:forEach>
										</select> 분 까지</p>
								</td>
							</tr>
							<tr>
								<th scope="row">방문목적</th>
								<td>
									<textarea cols="25" rows="3" name="txt_visitor_reason" id="txt_visitor_reason" class="comment"></textarea>
								</td>
							</tr>
							<tr>
								<th scope="row">동행인수</th>
								<td>
									<select name="visitor_per_cnt" title="동행인 수 선택" id="visitor_per_cnt" onchange="fnvisitor(this.value)" style="width:50%;">
									<option value="">동행인 수</option>
									<c:forEach var = "i" begin = "1" end = "10" step = "1" varStatus = "status">
									<option value="${i}">${i}</option>
									</c:forEach>
									</select><br />
									<div id="visitor_txt" style="display:none; line-height:18px;">동행인 이름 / 연락처</div>
									<c:forEach var = "i" begin = "1" end = "10" step = "1" varStatus = "status">
									<div id="visitor${i}" style="display:none;">
									<p><input type="text" name="visitor_name${i}" value="" class="intxt4" />&nbsp;<input type="text" name="visitor_tel_no${i}" value="" class="intxt5" /></p>
									</div>
									</c:forEach>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<p class="btn_more" style="padding-bottom:20px;"><img src="${requestScope.contextPath}/images/btn/btn_register2.gif" alt="예약등록" style="cursor: pointer;" onclick="goSubmit();" />&nbsp;&nbsp;<a href="javascript:history.back()"><img src="${requestScope.contextPath}/images/btn/btn_reset.gif" alt="더보기" /></a></p>
				</form>
			</div>
		</div><!-- // content -->
		<div id="searchPop" style="position:absolute; z-index:1; top:0px; width:100%; height:100%; display:none; background-color:#ffffff;">
			<div class="header">
				<h1>방문자 검색</h1>
				<p class="list"><a href="javascript:setVisible('searchPop');"><img src="${requestScope.contextPath}/images/btn/btn_close2.gif" alt="닫기" /></a></p>
			</div><!-- // header -->
			<div class="content">
				<div class="access">
					<ul id="apply">
					</ul>
				</div>
			</div><!-- // content -->
		</div>
	</div><!-- // wrap -->
	<script>
		window.HybridApp.clearAllHistory(); 
	</script>
</body>
</html>